<#import "../common/layout.ftl" as layout/>
<#import "../common/dataTables.ftl" as dataTables/>
<#import "../common/modern-forms.ftl" as mform/>
<#import "../common/modal.ftl" as modal/>

<!DOCTYPE html>
<html>
<@layout.head title="接口日志">
    <@dataTables.head/>
    <@dataTables.buttons_head/>
    <@dataTables.select_head/>
    <@dataTables.fixedHeader_head/>
    <@mform.head/>
    <@select.head/>
</@layout.head>
<body>
<@layout.page>
    <div class="main-box">

        <!-- 表格 -->
        <div class="content">
            <div id="btnGroup" class="btn-group" style="position: absolute">
                <input id="startdate" class="inp" name="startdate" placeholder='请选择开始日期' style="margin-left: 10px"/>
                <span>至</span>
                <input id="enddate" class="inp" name="enddate" placeholder='请选择结束日期'/>
                <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm"
                        style="margin-left: 5px; background:  #438EB9"
                        onclick="javascript:refreshData();">
                    <i class="fa fa-search"></i> 查询
                </button>
            </div>
            <!-- 表格 -->
            <@dataTables.commonTable id="mainTable"/>
        </div>
    </div>
    <!-- 弹出窗 -->
    <@modal.editModal id="modal-mUser" buttonId="btnmUserSave" width="500px">
        <@mform.container id="userEditForm">

        </@mform.container>
    </@modal.editModal>

</@layout.page>
<@layout.foot>
    <@dataTables.foot/>
    <@dataTables.buttons_foot/>
    <@dataTables.select_foot/>
    <@dataTables.fixedHeader_foot/>
    <@mform.foot/>
    <script src="${request.contextPath}/assets/js/jquery.serializejson.min.js?v=3653060703"></script>
    <script type="text/javascript">
        var stateMap = {
            <#list state as item>
            "${item.value}": "${item.name}",
            </#list>
        }
        var now = new Date();
        var begin = now.getFullYear() + "-" + (now.getMonth() + 1) + "-1";
        var endD;
        var nextMonth = now.getMonth() + 1;
        var nextMonthFirstDay = new Date(now.getFullYear(), nextMonth, 1);
        var oneDay = 1000 * 60 * 60 * 24;
        endD = new Date(nextMonthFirstDay - oneDay);
        var end = endD.getFullYear() + "-" + (endD.getMonth() + 1) + "-" + endD.getDate();

        $("#startdate").datetimepicker({
            language: "zh-CN",
            startView: 2,
            minView: 2,
            format: "yyyy-mm-dd",
            autoclose: true,
            initialDate: new Date(),
            todayBtn: true
        });
        $("#startdate").val(begin);
        $("#enddate").datetimepicker({
            language: "zh-CN",
            startView: 2,
            minView: 2,
            format: "yyyy-mm-dd",
            autoclose: true,
            todayBtn: true
        });
        $("#enddate").val(end);
        var columns =
            [
                {"sWidth": "40px", "title": "日志级别", "data": "logLevel"},
                {"sWidth": "40px", "title": "接口名称", "data": "interfaceName"},
                {"sWidth": "40px", "title": "接口模式", "data": "interfacePattern"},
                {"sWidth": "40px", "title": "访问地址", "data": "visitAddress"},
                {"sWidth": "40px", "title": "关键词1", "data": "keyWord1"},
                {"sWidth": "40px", "title": "关键词2", "data": "keyWord2"},
                {"sWidth": "40px", "title": "关键词3", "data": "keyWord3"},
                {"sWidth": "40px", "title": "关键词4", "data": "keyWord1"},
                {"sWidth": "40px", "title": "关键词5", "data": "keyWord2"},
                {"sWidth": "40px", "title": "关键词6", "data": "keyWord3"},
                {"sWidth": "40px", "title": "关键词7", "data": "keyWord1"},
                {"sWidth": "40px", "title": "关键词8", "data": "keyWord2"},
                {"sWidth": "40px", "title": "关键词9", "data": "keyWord3"},
                {"sWidth": "40px", "title": "关键词10", "data": "keyWord1"}
            ];
        var mainTable = $('#mainTable').winningTable({
            columns: columns,
            pageLength: 10,
            toolbar: "#mUserBtnGroup",
            /*select: {style: 'multi'},*/
            fixedHeader: false,
            searching: true,
            ordering: true,

            buttons: [

            ],
            "rowCallback": function (row, data, index) {
                $('td', row).eq(14).html( stateMap[data.state] );
            }
        });

        function refreshData() {
            var startdate = $("#startdate").val();
            var enddate = $("#enddate").val();
            var params = {
                datas: JSON.stringify({
                    b_time: startdate,
                    e_time: enddate,
                })
            };
            mainTable.queryData("${request.contextPath}/interfaceLog/queryDetail/"+${id});
        }
        refreshData()
        function log() {
            var datas = mainTable.getSelectedDatas();

            if (datas == null || datas.length == 0 || datas.length > 1) {
                swal("错误", "请选择一行数据", "error");
                return;
            }
            var data = datas[0];
            top.addTabs({
                id: "log"+data.id,
                title: "日志详细信息",
                close: 'ture',
                url: "${request.contextPath}/interfaceLog/detailMessage/" + data.id
            })
        }
    </script>
</@layout.foot>
</body>
</html>